<template>
  <div class="virtual-page">
    <VirtuallyList :data="list" key="id" v-slot="scoped">
      <!-- <div>{{ scoped.item.content }}</div> -->
    </VirtuallyList>
  </div>
</template>
<script setup lang="tsx">
import VirtuallyList from '@/components/VirtuallyList/index.vue'
import { readonly, render } from 'vue'
const list = readonly(
  new Array(100000).fill(null).map((item, index) => {
    return {
      id: `id-${index}`,
      content: Math.floor(Math.random() * 100000000).toString(16).toUpperCase(),
      render(data, context) {
        if (index % 10 === 0) console.log('render', data, context)
        return (<div class="item">
            <div class="item-label">索引: <span>{ index.toString().padStart(6, '0') }</span></div>
            <div class="item-content">内容: <span>{ data.data.content }</span></div>
        </div>)
      },
    //   formmat: (data) => `${index.toString().padStart(6, '0')}---${data.content}`
    }
  })
)

</script>
<style lang="scss" scoped>
.virtual-page {
    :deep(.item) {
        display: flex;
        .item-label{
            color: aqua;
            background-color: gray;
        }
        .item-content {
            color: gray;
            background-color: aqua;
        }
    }
}
</style>
